<template>
    <el-select v-model="value"
               :multiple="myMultiple"
               collapse-tags
               @change="choose"
               :size="mysize"
               style="width: 150px"
               placeholder="请选择">
        <el-option
                v-for="item in options"
                :key="item.value"
                style="height: 30px"
                :label="item.label"
                :value="item.value">
        </el-option>
    </el-select>
</template>

<script>
    export default {
        name: "diySelect",
        props: ['optionData', 'multiple', 'size'],
        data() {

            return {
                mysize: this.size,
                myMultiple: this.multiple,
                options: this.optionData,
                value: '',

            }
        },
        methods: {
            choose(val) {
                this.$emit('choose', val);
            }
        },
    }

    /*  使用示例
     *
    * <template>
    <div>
        <diySelect
        :optionData="optionData"    //设置选项数据  下面有数据格式
        @choose="choose"     //绑定取值方法
        multiple    //复选就加上这个属性，单选就不加
        size="small">  //设置尺寸      表格外用medium(默认)，表格内用small
        </diySelect>
    </div>
</template>
//js代码-----------
    export default {
        name: "invoicingPage",
        components:{
        },
           computed: {
            // optionData(){              //页面数据改变则下拉列表更新
            //     let data=[];
            //     pageData.optionData.forEach(function (item,i) {
            //         data.push({
            //             value:i,
            //             label:item.label,
            //         })
            //     });
            //
            //     return data
            // },
        },
        data(){
            return{
                selectValue:'',
                optionData:[{        //数据格式
                    value:1,
                    label:'香蕉'
                },
                    { value:2,
                        label:'苹果'},
                    { value:3,
                        label:'榴莲'},],
            }
        },
        methods:{
            choose(val){
                this.selectValue=val;    //获取选项值
                console.log(val);
            }
        }
    }
*/
</script>

<style scoped>

</style>